<template>
	<view class="search">
		<view class="search-text">
			<input v-if="!readonly" v-model="data" class="input" @input="input" @blur="blur" @focus="focus" :placeholder-style="'color:#8C8E9C;'" placeholder="请输入关键词" />
			<view v-else class="input"><view class="placeholder" :style="{ color: '#8C8E9C' }">请输入关键词</view></view>
			<uni-icons v-if="data != ''" class="clear" :size="34" :color="'#bfbfbf'" @click="clear" type="clear" size="30"></uni-icons>
			<image class="btn" @click="searchStart" src="../../static/linedesign-12.png"></image>
		</view>

		<view class="search-histroy" v-if="isHistroyShow">
			<view class="title">
				<text class="name">搜索历史</text>
				<text class="clear" @click="clearHistroy">清空</text>
			</view>

			<view class="content">
				<text class="item" :key="item" v-for="item in histroyList" @click="selectKeyWord(item)">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		readonly: {
			//只读
			type: Boolean,
			default: false
		},
		value: {
			//值
			type: String,
			default: ''
		}
	},
	data() {
		return {
			isHistroyShow: false, //历史记录显示
			data: this.$props.value,
			histroyList: [
				// 历史列表
			],
			histroyLength: 10 //历史记录长度
		};
	},
	methods: {
		focus() {
			this.isHistroyShow = true;
		},
		blur() {
			setTimeout(() => {
				this.isHistroyShow = false;
			}, 100);
		},
		clear() {
			console.log('clear');
			this.data = '';

			this.$emit('update:value', '');
			this.$emit('change', '');
		},
		input(event) {
			console.log('输入', event);
			var value = event.detail.value;
			this.$emit('update:value', value);
			this.$emit('change', value);
		},
		searchStart() {
			// 开始搜索
			this.isHistroyShow = false;
			this.$emit('searchStart', this.data);
			console.log('开始搜索', this.histroyList.length);
			if (this.data && this.data != '' && this.histroyList.indexOf(this.data) == -1) {
				if (!(this.histroyList.length < this.histroyLength)) this.histroyList.pop();
				this.histroyList.unshift(this.data);
				uni.setStorageSync('searchHistroyList', this.histroyList);
			}
		},
		selectKeyWord(text) {
			// 选择词条
			this.data = text;
			this.$emit('update:value', this.data);
			this.$emit('onKeyWordSelect', this.data);
		},
		clearHistroy() {
			// 清楚历史
			this.histroyList = [];
			uni.removeStorageSync('searchHistroyList');
		}
	},
	mounted() {
		var searchHistroyList = uni.getStorageSync('searchHistroyList');
		if (searchHistroyList) {
			// searchHistroyList = JSON.parse(searchHistroyList);
			this.histroyList = searchHistroyList;
		}
		console.log('加载', searchHistroyList);
	}
};
</script>

<style lang="scss">
.search {
	width: 100%;
	.search-text {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 95%;
		height: 70rpx;
		font-size: 28rpx;
		margin: auto;
		box-sizing: border-box;
		padding: 10rpx 10rpx 10rpx 24rpx;
		border: 2rpx solid #c1c1c1;
		border-radius: 100px;
		position: relative;
		.input {
			width: 100%;
			box-sizing: border-box;
			padding-right: 40rpx;
		}
		.clear {
			position: absolute;
			right: 33px;
			// margin-top: 1px;
			padding: 8px 4px;
			color: #bfbfbf !important;
			::v-deep .uni-icons {
				color: #bfbfbf !important;
			}
		}
		.btn {
			width: 40rpx;
			height: 36rpx;
			padding: 14rpx 16rpx;
		}
	}
	.search-histroy {
		width: 100%;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100rpx;
			font-size: 36rpx;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			.name {
				color: #46494d;
			}
			.clear {
				color: #ff6106;
			}
		}
		.content {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;

			.item {
				text-align: center;
				padding: 4rpx 24rpx;
				color: #6c6f72;
				font-size: 34rpx;
				border: 2rpx solid #e3e3e3;
				border-radius: 100px;
				margin: 6rpx 0rpx;
			}
			.item:nth-last-child(n + 2) {
				margin-right: 20rpx;
			}
		}
	}
}
</style>
